<template>
	<view class="">
		<view class="" :style="{ width: bodyWidth + 'px',height: bodyHeight + 'px' }">
			<!-- <image class="img_bg" src="../../static/bg.png" :style="{ height: bodyHeight + 'px' }"></image> -->
			<image class="img_bg" src="https://qiniu.sxpz.vip/http://tmp/ZLsavoEUTcfb1a30840284103f020f66646f7f3a4a50.png" :style="{ height: bodyHeight + 'px' }"></image>
			<view class="center">

				<form @submit="login()">
					<!-- 登录方式切换 -->
					<view class="login-change" @click="changeLogin()">
						<text style="color: #FFFFFF; font-size: 28rpx; margin-left: 64rpx;">密码登录</text>
						<text style="color: #FFFFFF; font-size: 28rpx; margin-left: 150rpx;">验证码登录</text>
					</view>

					<view :class="login_change_btn">
						<text style="color: #138AF0; font-size: 28rpx; margin-left: 65rpx;">{{login_text}}</text>
					</view>

					<!-- 账号密码输入框 -->
					<input class="input" placeholder-class="holder" v-model="loginWithPsd.username"
						placeholder="请输入手机号" />
					<input class="input" v-show="getCode === true" type="password" style="margin-top: 40rpx;"
						v-model="loginWithPsd.psd" placeholder-class="holder" placeholder="请输入密码" />
					<view class="input-btn" v-show="getCode === false">
						<input class="input" style="margin-top: 40rpx;" v-model="loginWithPsd.code"
							placeholder-class="holder" placeholder="请输入验证码" />
						<view class="checking" v-show="BtnStatus" @click="getVerify"> 获取验证码 </view>
						<view class="state" v-show="!BtnStatus" style="color: #fff;">
							倒计时{{countDownTime}}秒
						</view>
					</view>

					<!-- 注册 -->
					<view class="Logintext" @click="goSign()">
						<text>没有账号?</text>
						<text style="color: #128BF1;">立即注册</text>
					</view>
					<!-- 登录按钮 -->
					<button class="LoginBtn" @click="handleSubmit">立即登录</button>
				</form>

				<view class="" style="color: #C0C8CD; font-size: 22rpx; margin-left: 90rpx; margin-top: 20rpx;" @click="goPrivateService()">
					登录即表示阅读并同意《邦泰云安全用户协议》
					
				</view>
				
				<!-- #ifdef MP-WEIXIN -->
				<view class="" @click="wxLogin()" style="font-size: 24rpx; color: #999999; margin-top: 118rpx; text-align: center;">
					微信登录（需提前绑定账号）
				</view>
				<!-- #endif -->
				
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bodyWidth: '', //窗口宽高
				bodyHeight: '',
				getCode: true, // 控制切换密码或验证码登录
				state: true, // 控制点击验证码后显示倒计时
				login_text: '密码登录', //密码登录和验证码登录按钮切换文字
				login_change_btn: 'login-change-btn1', //密码登录和验证码登录切换按钮
				currentTime: 0, //显示时间变量
				totalTime: 60, //总时间，单位秒
				recordingTime: 0, //记录时间变量
				// 账号密码登陆
				loginWithPsd: {
					username: '',
					psd: '',
					code: '',
				},
				// 验证码相关
				BtnStatus: true,
				countDownTime: 60,
				myEndTimeGet: '',
				wxcode:''
			}
		},
		methods: {
			goPrivateService(){
				uni.navigateTo({
					url:'../know/webVIew?src=https://control.sxpz.vip/agreement.html'
				})
			},
			// 微信登录
			async wxLogin(){
				const res =await this.$myRequest({
					url:'Wx/wxlogin',
					method:'POST',
					data:{
						code:this.wxcode
					}
				})
				console.log(res)
				if(res.data.code != 200) return uni.showToast({
					title: res.data.datas.msg.msg,
					icon:'none'
				})
				
				// 用户id
				uni.setStorage({
					key: 'btlh_process_member_id',
					data: res.data.datas.info.member_id
				})
				
				// 头像
				uni.setStorage({
					key: 'btlh_process_avatarUrl',
					data: res.data.datas.info.avatar
				})
				
				// 用户邮箱
				uni.setStorage({
					key: 'btlh_process_mail',
					data: res.data.datas.info.mail
				})
				
				// 用户昵称
				uni.setStorage({
					key: 'btlh_process_nickname',
					data: res.data.datas.info.nickname
				})
				// token
				uni.setStorage({
					key: 'btlh_process_token',
					data: res.data.datas.info.token
				})
				uni.navigateTo({
					url: `/pages/index/firm/firm`
				})
			},
			
			// 账号密码登陆
			async handleSubmit() {
				if (this.getCode) {
					const {
						data: res
					} = await this.$myRequest({
						url: 'Public/login_by_password',
						method: 'POST',
						data: {
							username: this.loginWithPsd.username,
							password: this.loginWithPsd.psd,
						},

					})
					console.log('res', res);
					if (res.code != 200) return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					})
					
					
					uni.setStorage({
						key:'user_name',
						data:this.loginWithPsd.username
					})
					
					uni.setStorage({
						key:'user_password',
						data:this.loginWithPsd.psd
					})
					
					// 用户id
					uni.setStorage({
						key: 'btlh_process_member_id',
						data: res.datas.info.member_id
					})
					
					// 头像
					uni.setStorage({
						key: 'btlh_process_avatarUrl',
						data: res.datas.info.avatar
					})
					
					// 用户邮箱
					uni.setStorage({
						key: 'btlh_process_mail',
						data: res.datas.info.mail
					})
					
					// 用户昵称
					uni.setStorage({
						key: 'btlh_process_nickname',
						data: res.datas.info.nickname
					})
					// token
					uni.setStorage({
						key: 'btlh_process_token',
						data: res.datas.info.token
					})
					uni.navigateTo({
						url: `/pages/index/firm/firm`
					})
					
				} else {
					const {
						data: res
					} = await this.$myRequest({
						url: 'Public/login_by_code',
						method: 'POST',
						data: {
							username: this.loginWithPsd.username,
							code: this.loginWithPsd.code,
						},

					})
					console.log('res', res);
					if (res.code != 200) return uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					})
					// 用户id
					uni.setStorage({
						key: 'btlh_process_member_id',
						data: res.datas.info.member_id
					})
					
					// 头像
					uni.setStorage({
						key: 'btlh_process_avatarUrl',
						data: res.datas.info.avatar
					})
					
					// 用户邮箱
					uni.setStorage({
						key: 'btlh_process_mail',
						data: res.datas.info.mail
					})
					
					// 用户昵称
					uni.setStorage({
						key: 'btlh_process_nickname',
						data: res.datas.info.nickname
					})
					// token
					uni.setStorage({
						key: 'btlh_process_token',
						data: res.datas.info.token
					})
					uni.navigateTo({
						url: `/pages/index/firm/firm`
					})
				}

			},

			// 点击切换登录方式
			changeLogin() {
				this.getCode = !this.getCode
				this.login_change_btn = this.login_change_btn == 'login-change-btn1' ? 'login-change-btn2' :
					'login-change-btn1';
				this.login_text = this.login_text == '密码登录' ? '验证码登录' : '密码登录';
			},

			// 点击前往注册页
			goSign() {
				uni.redirectTo({
					url: './signup'
				})
			},

			// 验证码倒计时
			GetCode() {
				let endMsRes = new Date().getTime() + 60000
				uni.setStorage({
					key: 'myEndTime',
					data: JSON.stringify(endMsRes)
				})
				this.codeCountDown(endMsRes)
			},
			codeCountDown(endMsRes) {
				this.BtnStatus = false
				this.countDownTime = Math.ceil((endMsRes - new Date().getTime()) / 1000)
				let time = setTimeout(() => {
					this.countDownTime--
					if (this.countDownTime < 1) {
						this.BtnStatus = true
						this.countDownTime = 60
						uni.removeStorage({
							key: 'myEndTime'
						});
						clearTimeout(time)
					} else {
						this.codeCountDown(endMsRes)
					}
				}, 1000)
			},

			// 验证码登陆点击获取验证码
			async getVerify() {
				// 手机号是否为空
				if (this.loginWithPsd.username.trim().length == 0) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				}
				this.GetCode()
				const {
					data: res
				} = await this.$myRequest({
					url: 'Public/send_message',
					method: 'POST',
					data: {
						username: this.loginWithPsd.username,
					},

				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				console.log('res', res);
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})

			},
			// 改变倒计时方法
			checkingTime() {
				let that = this;
				//判断是否开启
				if (this.state === false) {
					//判断显示时间是否已到0，判断记录时间是否已到总时间
					if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
						//记录时间增加 1
						this.recordingTime = this.recordingTime + 1;
						//显示时间，用总时间 - 记录时间
						this.currentTime = this.totalTime - this.recordingTime;
						//1秒钟后，再次执行本方法
						setTimeout(() => {
							that.checkingTime();
						}, 1000)
					} else {
						//时间已完成，还原相关变量
						this.state = !this.state; //关闭倒计时
						this.recordingTime = 0; //记录时间为0
						this.currentTime = this.totalTime; //显示时间为总时间
					}
				} else {
					//倒计时未开启，初始化默认变量
					this.state = true;
					this.recordingTime = 0;
					this.currentTime = this.totalTime;
				}
			}
		},
		onLoad() {
			let myEndTimeGet = ''
			uni.getStorage({
				key: 'myEndTime',
				success: (res) => {
					myEndTimeGet = res.data
					myEndTimeGet && this.codeCountDown(myEndTimeGet)
				}
			})
			
		},
		onShow() {
			// #ifdef MP-WEIXIN
			uni.login({
				success: (res) => {
					this.wxcode = res.code
				}
			})
			// #endif
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}

	.login-change-btn2 {
		width: 260rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 32px;
		position: absolute;
		top: -32rpx;
		right: 62rpx;
		line-height: 64rpx;

	}

	.login-change-btn1 {
		width: 260rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 32px;
		position: absolute;
		top: -32rpx;
		line-height: 64rpx;
		margin-left: 62rpx;
	}

	.login-change {
		width: 507rpx;
		height: 64rpx;
		background-color: #65BAFF;
		position: absolute;
		top: -32rpx;
		margin-left: 62rpx;
		box-shadow: 0px 3px 8px 0px rgba(10, 96, 194, 0.32);
		border-radius: 32px;
		line-height: 64rpx;
	}

	.input-btn {
		position: relative;
	}

	.zai-input {
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 36upx;
	}

	.checking {
		position: absolute;
		width: 170rpx;
		height: 60rpx;
		right: 45rpx;
		top: 14rpx;
		color: #fff;
		border-radius: 26px;
		font-size: 22rpx;
		margin-left: 300rpx;
		text-align: center;
		background-color: #65BAFF;
		line-height: 60rpx;
		z-index: 99;
	}

	.state {
		position: absolute;
		width: 170rpx;
		height: 60rpx;
		right: 45rpx;
		top: 14rpx;
		color: #999999;
		border-radius: 26px;
		font-size: 22rpx;
		margin-left: 300rpx;
		text-align: center;
		background-color: #C0C8CD;
		line-height: 60rpx;
	}

	.LoginBtn {
		width: 570rpx;
		height: 80rpx;
		margin-top: 40rpx;
		background: linear-gradient(0deg, #037CE3, #2EB3FF);
		box-shadow: 2px 8px 9px 0px rgba(10, 106, 188, 0.14);
		border-radius: 40px;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.Logintext {
		margin-top: 20rpx;
		margin-left: 404rpx;
		font-size: 22rpx;
	}

	.img_bg {
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.center {
		width: 630rpx;
		height: 570rpx;
		margin-top: 392rpx;
		margin-left: 60rpx;
		background: #FFFFFF;
		border-radius: 20px;
		position: absolute;
	}

	.input {
		width: 540rpx;
		height: 80rpx;
		border: 1px solid #E5E5E5;
		border-radius: 40px;
		margin-top: 102rpx;
		margin-left: 30rpx;
		padding-left: 30rpx;
	}

	.holder {
		font-size: 26rpx;
	}
</style>
